<template>
  <div>
     <div class="user-card">
        <!-- 用户头像、姓名 -->
       <div class="user-img">
         <img :src="userObj.photo" alt="">
          <div class="user-title">
            <span class="user-name">{{userObj.name}}</span>
            <span class="user-apply">申请认证</span>
          </div>
       </div>
       <!-- 动态、关注、粉丝 -->
       <div class="user-act">
         <div class="user-act-item">
           <span>{{userObj.art_count}}</span>
           <span>动态</span>
         </div>
           <div class="user-act-item">
           <span>{{userObj.follow_count}}</span>
           <span>关注</span>
         </div>
          <div class="user-act-item">
           <span>{{userObj.fans_count}}</span>
           <span>粉丝</span>
         </div>
       </div>
     </div>
        <!-- 操作面板 -->
    <van-cell-group class="action-card">
      <van-cell icon="edit" title="编辑资料" is-link  to="/useredit"/>
      <van-cell icon="chat-o" title="小思同学" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link  @click="layout"/>
    </van-cell-group>
  </div>
</template>

<script>
import { removeToken } from '@/utils/token.js'
import { Dialog } from 'vant'
import { userAPI } from '@/api'
export default {
  data () {
    return {
      userObj: {}
    }
  },
  created () {
    this.getUser()
  },
  activated () {
    this.getUser()
  },
  methods: {
    // 获取用户基本信息
    async getUser () {
      const res = await userAPI()
      this.userObj = res.data.data
    },
    // 退出登录
    layout () {
      Dialog.confirm({
        title: '是否退出登录',
        message: '这就走了嘛?'
      })
        .then(() => {
          // 主动退出 -> 用户点击退出, 清空token, 强制replace切换登录页
          // 被动退出 -> 把token值传后台, 后台返回401 -> 响应拦截器发现401状态证明你身份过期 -> 强制进登录页
          // on confirm
          removeToken()
          this.$router.replace('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.user-card{
  width: 100%;
  height: 200px;
  background-color: #007bff;
  .user-img{
    display: flex;
    padding: 30px 16px;
    .user-title{
      flex-direction: column;
      display: flex;
      align-items: flex-start
    }
    .user-name{
      margin-top: 5px;
      font-size: 14px;
      color: white;
      font-weight: bold;
    }
    .user-apply{
       margin-top: 8px;
       font-size: 12px;
       background-color: white;
       color:  #007bff;
       border-radius: 2px;
       padding: 0 4px;
    }
    img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
      background-color: #fff;
    }
  }
  .user-act{
    display: flex;
    justify-content: space-between;
    width: 100%;
    .user-act-item{
      width: 33.3%;
      color: white;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      text-align: center;
      padding-bottom: 30px;
    }
  }
}
</style>
